<template>
    <div id="canvas" style="width: 100%;height: 100%;" ref="canvas"></div>
</template>
  
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts'
const canvas = ref() // dom实例
let myChart: any = null // echarts实例

onMounted(() => {
    setTimeout(() => {
        renderChart()
    }, 200);

})
const renderChart = () => {
    myChart = echarts.init(canvas.value)

    let option = {
        // backgroundColor: '#222',
        // 1.鼠标移入提示
        tooltip: {
            trigger: 'item'
        },
        grid:{
            bottom:30
        },
        // 2.图例组件
        legend: {
            top: '1%',
            left: 'center',
            // 文本样式
            textStyle: {
                color: '#fff'
            }
        },
        // 3.图表内容
        series: [
            getItem({ name: '医院', radius: ['30%', '35%'], startAngle: -10, value: 70, color1: '#8915f9', color2: '#3d13fd' }),
            getItem({ name: '商超', radius: ['40%', '45%'], startAngle: 50, value: 50, color1: '#f72f48', color2: '#f44179' }),
            getItem({ name: '学校', radius: ['50%', '55%'], startAngle: 260, value: 50, color1: '#1686f3', color2: '#32b8fc' }),
            getItem({ name: '小区', radius: ['60%', '65%'], startAngle: 150, value: 60, color1: '#2648f7', color2: '#2d8af9' }),
        ]
    };

    /* { name:标题 , radius:[内圆直径,外圆直径] ,
    startAngle:圆心角  value:数据 , 
    color1: 颜色, color2: 颜色 } */
    function getItem(data:any) {
        return {
            name: '景区资源',
            type: 'pie',
            center: ['50%', '60%'],
            radius: data.radius,
            startAngle: data.startAngle,
            avoidLabelOverlap: false,
            label: {
                show: true,
                color: '#2196b0'
                // position: 'center'
            },
            // 鼠标移入时文本状态
            emphasis: {
                label: {
                    show: true,
                    fontSize: 40,
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: true,
                length: 60,
                length2: 20
            },
            data: [
                {
                    value: data.value, name: data.name,
                    itemStyle: {
                        // 渐变颜色
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 0,
                                color: data.color1
                            },
                            {
                                offset: 1,
                                color: data.color2
                            }
                        ])
                    },
                },
                {
                    value: 100 - data.value, name: data.name,//设置name防止legend错位
                    itemStyle: {
                        // 颜色设置为none,则该片段不渲染
                        color: 'none'
                    },
                    label: { show: false }
                },

            ]
        }
    }
    myChart.setOption(option)
}
window.addEventListener("resize", function () {
    myChart?.resize();
});
</script>
  
<style lang="scss" scoped></style>
  